
<template>
    <div class="health-wrapper">
        <div class="container">
            <div class="header">
                <h1>身体异常状态上报</h1>
                <el-button class="btn" type="primary" @click="showBodyReport">上报</el-button>
            </div>
            <div class="body">
                <el-form label-width="100px" :model="form" :rules="rules" ref="form">
                    <el-form-item label="姓名" prop="username">
                        <el-input v-model="form.username" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="学号">
                        <el-input v-model="form.sid" placeholder="请输入学号"></el-input>
                    </el-form-item>
                    <div style="display: flex;">
                        <el-form-item label="宿舍号" prop="sushe">
                            <el-input v-model="form.sushe" placeholder="请输入宿舍号"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </div>

                    <div style="display: flex;">

                        <el-form-item label="是否发热" prop="fare">
                            <el-select v-model="form.fare" placeholder="是否出现发热症状">
                                <el-option label="否" value="否"></el-option>
                                <el-option label="是" value="是"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否甲流" prop="jialiu">
                            <el-select v-model="form.jialiu" placeholder="请选择甲流状况">
                                <el-option label="否" value="否"></el-option>
                                <el-option label="是" value="是"></el-option>
                                <el-option label="疑似" value="疑似"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>

                    <div style="display: flex;">
                        <el-form-item label="是否新冠" style="flex: 1;" prop="xinguan">
                            <el-select v-model="form.xinguan" placeholder="请选择新冠状况">
                                <el-option label="否" value="否"></el-option>
                                <el-option label="是" value="是"></el-option>
                                <el-option label="疑似" value="疑似"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否诺如" style="flex: 1;" prop="nuoru">
                            <el-select v-model="form.nuoru" placeholder="请选择诺如状况">
                                <el-option label="否" value="否"></el-option>
                                <el-option label="是" value="是"></el-option>
                                <el-option label="疑似" value="疑似"></el-option>
                            </el-select>
                        </el-form-item>


                    </div>
                    <div style="display: flex;">
                        <el-form-item label="抗原结果" prop="kangyuan">
                            <el-select v-model="form.kangyuan" placeholder="请选择检测结果">
                                <el-option label="阳性" value="阳性"></el-option>
                                <el-option label="阴性" value="阴性"></el-option>
                                <el-option label="无" value="无"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="抗原检测凭证:" class="uploadImg">
                            <el-upload class="avatar-uploader" action="http://localhost:8081/qiniu/upload"
                                       :show-file-list="false" :on-success="uploadOk" :on-change="onChange" ref="upload">
                                <img :src="imageUrl" class="avatar" style="width: 100px;height: 80px;" />
                            </el-upload>
                        </el-form-item>
                    </div>

                </el-form>

            </div>
            <div class="footer">
                <h2>上报记录查询</h2>
                <el-button class="btn" type="success" @click="showReportRecords">查询</el-button>
            </div>



            <el-dialog title="上报历史只显示最新5条记录" :visible.sync="dialogTableVisible">
                <el-table :data="gridData" slot-scope="scope">
                    <el-table-column property="date" label="日期" width="200"></el-table-column>
                    <el-table-column property="username" label="姓名" width="100"></el-table-column>
                    <el-table-column property="zhengzhuang" label="症状" width="100"></el-table-column>
                    <el-table-column property="kangyuan" label="抗原结果" width="100"></el-table-column>
                    <el-table-column>
                        <template slot-scope="scope">
                            <el-button size="mini" @click="update(scope.row.id)">编辑</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot-scope="scope">
                            <el-button type="success" icon="el-icon-check" circle @click="editRecovery(scope.row.id)">我已康复</el-button>
                        </template>

                    </el-table-column>

                </el-table>

            </el-dialog>

        </div>
    </div>

</template>

<script>
import { request } from "@/axios/request"
export default {
    data() {
        return {
            form: {
                id: "",
                username: '',
                sid: '',
                sushe: '',
                phone: '',
                fare: '',
                jialiu: '',
                xinguan: '',
                nuoru: '',
                kangyuan: '',
                url: ''
            },
            rules: {
                username: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' },
                    { max: 10, message: '姓名不能超过10个字符', trigger: 'blur' }
                ],
                sushe: [
                    { required: true, message: '宿舍号不能为空', trigger: 'blur' },
                    { max: 10, message: '宿舍号不能超过10个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '手机号不能为空', trigger: 'blur' },
                    { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
                ],
                fare: [
                    { required: true, message: '请选择是否出现发热症状', trigger: 'blur' }
                ],
                jialiu: [
                    { required: true, message: '请选择是否甲流', trigger: 'blur' }
                ],
                xinguan: [
                    { required: true, message: '请选择是否新冠', trigger: 'blur' }
                ],
                nuoru: [
                    { required: true, message: '请选择是否诺如', trigger: 'blur' }
                ],
                kangyuan: [
                    { required: true, message: '请选择检测结果', trigger: 'blur' }
                ]
            },
            uid: "",
            gridData: [{
                id: "",
                date: '2016-05-02',
                username: '王小虎',
                zhengzhuang: '发烧',
                kuangyuan: "阳性"
            }, {
                id: "",
                date: '2016-05-04',
                username: '王小虎',
                zhengzhuang: '诺如',
                kuangyuan: "阳性"
            }, {
                id: "",
                date: '2016-05-01',
                username: '王小虎',
                zhengzhuang: '甲流 ',
                kuangyuan: "阳性"
            }, {
                id: "",
                date: '2016-05-03',
                username: '王小虎',
                zhengzhuang: '新冠',
                kuangyuan: "阳性"
            }],
            dialogTableVisible: false,
            dialogFormVisible: false,
            height: "",
            weight: "",
            bmi: "",
            imageUrl: '',
            temperature: "",
            fever: "no",
            cough: "no",
            breathingDifficulty: "no",
            phone: "",
            sushe: "",
            sid: "",
            kangyuan: "",
            username: "",
            xuehao: "",
            xinguan: "",
            jialiu: "",
            nuoru: "",
            fare: "",
            dialogVisible: false,
            fluSymptoms: "no",
            covidSymptoms: "no",
            contactWithCases: "no",
            travelToHighRisk: "no",
            rules: {
                username: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                sid: [
                    { required: true, message: '请输入学号', trigger: 'blur' },
                    { pattern: /^[0-20]{8}$/, message: '请输入学号', trigger: 'blur' }
                ],
                sushe: [
                    { required: true, message: '请输入宿舍号', trigger: 'blur' },

                ],
                phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
                ],
                fare: [
                    { required: true, message: '请选择是否发热', trigger: 'change' }
                ],
                jialiu: [
                    { required: true, message: '请选择是否甲流', trigger: 'change' }
                ],
                xinguan: [
                    { required: true, message: '请选择是否新冠', trigger: 'change' }
                ],
                nuoru: [
                    { required: true, message: '请选择是否诺如', trigger: 'change' }
                ],
                kangyuan: [
                    { required: true, message: '请选择抗原检测结果', trigger: 'change' }
                ]
            }
        }

    },
    methods: {
        editRecovery(id){

            request({
                url: "/api/health/recovery/"+ id,
                method: "put",
            }).then((res) => {
                if (res.data.stateCode == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error'
                    })
                }

            });
        },
        update(id) {
            request({
                url: "/api/health/" + id,
                method: "get",
            }).then((res) => {
                if (res.data.stateCode == 200) {
                    this.form = res.data.object
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })
                    this.imageUrl = URL.createObjectURL(res.data.object.url);
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error'
                    })
                }

            });
        },
        uploadOk(res, file) {
            console.log(res.object)
            this.imageUrl = URL.createObjectURL(file.raw);
            // this.imageUrl = "rrb1ca0z5.hd-bkt.clouddn.com/279e6c0f-6a11-4b49-8086-a23abf139fde1604115698869557.jpg"
            this.form.url = res.object
            console.log(this.form)
        },

        onChange(file) {
            if (file) {
                const suffix = file.name.split('.')[1]
                const size = file.size / 1024 / 1024 < 2
                if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) {
                    this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                    this.$refs.upload.clearFiles()
                    return false
                }
                if (!size) {
                    this.$message.error('上传文件大小不能超过 2MB!')
                    return false
                }
                return file
            }
        },
        handleAvatarSuccess(res, file) {
            alert("yes")
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        showBodyReport() {

            /* let from = {
                 username: this.username,
                 sid: this.sid,
                 sushe: this.sushe,
                 phone: this.phone,
                 fare: this.fare,
                 jialiu: this.jialiu,
                 xinguan: this.xinguan,
                 nuoru: this.nuoru,
                 kangyuan: this.kangyuan,
                 url: this.imageUrl
             }*/

            console.log(this.form)
            if (this.form.kangyuan == "" || this.form.nuoru == "" || this.form.sid == "" ||
                this.form == "" || this.form.phone == "" ||
                this.form.fare == "" || this.form.jialiu == "") {
                this.$message({
                    message: "请填写内容再上报！",
                    type: 'error'
                })
                return;
            }

            request({
                url: "/api/health",
                method: "post",
                data: this.form
            }).then((res) => {
                if (res.data.stateCode == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })
                    this.handleAvatarSuccess();
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error'
                    })
                }

            });

            // TODO: navigate to body report page
        },
        handleAvatarSuccess() {
            // 上传成功后执行的函数
            // 在这里重置数据模型以清空表单内容
            this.form = "";
            this.imageUrl = ""
            this.$refs.upload.clearFiles(); // 清空上传组件中的文件列表
        },
        showReportRecords() {
            this.dialogVisible = true;
            this.dialogTableVisible = true;
            request({
                url: "/api/health/",
                method: "get",
            }).then((res) => {
                if (res.data.stateCode == 200) {
                    this.gridData = res.data.object
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error'
                    })
                }

            });
            // TODO: navigate to report records page
            // alert(`身高：${this.height}cm，体重：${this.weight}kg，BMI：${this.bmi}，血压：${this.bloodPressure}mmHg，心率：${this.heartRate}次/分。`);
        }
    }
}
</script>

<style>
.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

}
.health-wrapper {
    background-image: url(../../static/image/9992.jpg);
    background-size: cover;
    background-position: center center;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-wrapper img {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    vertical-align: middle
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header h1 {
    font-size: 24px;
    font-weight: bold;
}

.body {
    margin-bottom: 40px;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer h2 {
    font-size: 18px;
    font-weight: bold;
}

.btn {
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 14px;
}
</style>
